<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="js/a.js"></script>
    <style>
      .nones{
        display: none;
      }
      .table-container {
                width: 100%;
                overflow-x: auto;
                background-color: white;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
    
            .score-table {
                width: 100%;
                border-collapse: collapse;
                min-width: 320px;
            }
    
            .score-table th,
            .score-table td {
                padding: 12px 16px;
                text-align: left;
                border-bottom: 1px solid #e0e0e0;
            }
    
            .score-table th {
                background-color: #f8f9fa;
                font-weight: 600;
                color: #2d3436;
            }
    
            .score-table tbody tr:last-child td {
                border-bottom: none;
            }
    
            .score-table tbody tr:nth-child(even) {
                background-color: #f8f9fa;
            }
    
            @media (max-width: 480px) {
                .score-table th,
                .score-table td {
                    padding: 10px 12px;
                    font-size: 14px;
                }
                
                .table-container {
                    border-radius: 4px;
                }
            }
    
            /* 悬停效果 */
            .score-table tbody tr:hover {
                background-color: #f1f1f1;
                transition: background-color 0.2s;
            }
            body::after {
              content: "";
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              z-index: 9999;
              pointer-events: none;
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Ctext x='50%25' y='50%25' font-size='24' fill='%23666' opacity='0.2' transform='rotate(-25 150 100)' text-anchor='middle'%3E%E7%AB%9E%E5%A5%87%E7%94%B0%E5%BE%84%3C/text%3E%3C/svg%3E");
              background-repeat: repeat;
            }
            #bgs{
              width: 100%;
              height:100vh;
              background-image: url(img/bg2.png);
              background-size: cover;
              background-position: center;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
              opacity: 0.2;
              pointer-events: none;  /* 👈 禁用交互事件穿透 */
            }
            @media screen\0 {
            #bgs {
              display: none; /* 直接隐藏或使用 JS 替代方案 */
            }
          }
    </style>
  </head>
  <body>
    <div id="logos" class="sm:mx-auto sm:w-full sm:max-w-sm">
        <img class="mx-auto" src="img/2387503e12553428491ec844829021b.svg" width="230">
    </div>
    <div class="isolate bg-white px-6 py-0 sm:py-32 lg:px-8" id="inputs">
        <div class="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]" aria-hidden="true">
          <div class="relative left-1/2 -z-10 aspect-1155/678 w-[36.125rem] max-w-none -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-40rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
        </div>
        <div class="mx-auto max-w-2xl text-center">
          <h2 class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">体育四项算分系统</h2>
        </div>
        <form action="#" method="POST" class="mx-auto mt-3 max-w-xl sm:mt-20">
          <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
                <div class="mt-6 space-y-6">
                  <div class="flex items-center gap-x-6">
                    <label class="block text-sm/6 font-semibold text-gray-900">性别</label>
                    <input id="push-everything" name="sex" type="radio" checked class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden" value="男">
                    <label for="push-everything" class="block text-sm/6 font-medium text-gray-900">男</label>
                    <input id="push-nothing" name="sex" type="radio" class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden" value="女">
                    <label for="push-nothing" class="block text-sm/6 font-medium text-gray-900">女</label>
                  </div>
                </div>
            <div>
              <label for="first-name" class="block text-sm/6 font-semibold text-gray-900">100米成绩</label>
              <div class="mt-2.5">
                <input id="Score100" placeholder="12.30" type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
              </div>
            </div>
            <div>
              <label for="last-name" class="block text-sm/6 font-semibold text-gray-900">800米成绩</label>
              <div class="flex grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                <div class="mt-2 flex">
                  <input type="text" placeholder="2" name="city" id="minute" autocomplete="address-level2" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                  <label for="city" class="text-sm/6 font-medium text-gray-900">分</label>
                </div>
                <div class="mt-2 flex">
                  <input type="text" placeholder="15" name="region" id="second" autocomplete="address-level1" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                  <label for="region" class="block text-sm/6 font-medium text-gray-900">秒</label>
                </div>
                <div class="mt-2 flex">
                  <input type="text" placeholder="52" name="postal-code" id="msec" autocomplete="postal-code" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                </div>
              </div>
            </div>
            <div class="sm:col-span-2">
              <label for="company" class="block text-sm/6 font-semibold text-gray-900">铅球成绩</label>
              <div class="mt-2.5">
                <input id="ScoreShot" placeholder="13.5" type="text" name="company" id="company" autocomplete="organization" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
              </div>
            </div>
            <div class="sm:col-span-2">
              <label for="email" class="block text-sm/6 font-semibold text-gray-900">二级蛙跳</label>
              <div class="mt-2.5">
                <input id="ScoreJump" placeholder="5.3" type="email" name="email" id="email" autocomplete="email" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
              </div>
            </div>
          </div>
          <div class="mt-10">
            <button onclick="Score()" type="button" class="block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">立即查询分数</button>
          </div>
        </form>
      </div>
      <div class="nones bg-white px-6 py-5 sm:py-32 lg:px-8" id="scores">
        <div class="table-container">
          <table class="score-table">
              <thead>
                  <tr>
                      <th>项目</th>
                      <th>成绩</th>
                      <th>分数</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>100米</td>
                      <td id="Score100Input">12.30</td>
                      <td id="Score100Result">90</td>
                  </tr>
                  <tr>
                      <td>800米</td>
                      <td id="Score800Input">2:15.52</td>
                      <td id="Score800Result">85</td>
                  </tr>
                  <tr>
                      <td>铅球</td>
                      <td id="ScoreShotInput">13.5</td>
                      <td id="ScoreShotResult">88</td>
                  </tr>
                  <tr>
                      <td>二级蛙跳</td>
                      <td id="ScoreJumpInput">5.3</td>
                      <td id="ScoreJumpResult">92</td>
                  </tr>
              </tbody>
          </table>
      </div>
      <div class="mx-auto max-w-2xl text-center">
        <p class="mt-2 text-lg/8 text-gray-600">四项体育总成绩</p>
        <h2 id="Scoresum" class="text-2xl font-semibold tracking-tight text-balance text-gray-900 sm:text-2xl">666</h2>
      </div>
      <div class="mx-auto max-w-2xl text-center">
        <p class="mt-2 text-lg/8 text-gray-600">四项体育折合成绩(体育四项总成绩 ×4.5)</p>
        <h2 id="ScoreConvertInto" class="text-2xl font-semibold tracking-tight text-balance text-gray-900 sm:text-2xl">666</h2>
      </div>
      
      <div id="vSecond" class="nones">
        <div class="mx-auto max-w-2xl text-center">
          <p class="mt-2 text-lg/8 text-gray-600">文化课折合成绩</p>
          <h2 id="synthesisConvertInto" class="text-2xl font-semibold tracking-tight text-balance text-gray-900 sm:text-2xl">55</h2>
        </div>
        <div class="mx-auto max-w-2xl text-center">
          <p class="mt-2 text-lg/8 text-gray-600">综合成绩</p>
          <h2 id="finalScore" class="text-2xl font-semibold tracking-tight text-balance text-gray-900 sm:text-2xl">666</h2>
        </div>
      </div>
      
      <div id="synthesisDiv" class="sm:col-span-2">
        <label for="company" class="block text-sm/6 font-semibold text-gray-900">文化课成绩</label>
        <div class="mt-2 flex">
          <input type="text" placeholder="请输入文化分" name="region" id="synthesisInput" autocomplete="address-level1" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
          <button style="margin-left: 20px;" onclick="synthesis()" type="button" class="w-full rounded-md bg-indigo-600 px-0 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">计算成绩</button>
        </div>
      </div>
        <div class="mt-5">
          <button onclick="breaks()" type="button" class="block w-full rounded-md bg-indigo-00 px-3.5 py-2.5 text-center text-sm font-semibold text-black border-1 shadow-xs hover:bg-indigo-000 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-000">返回输入分数</button>
        </div>
      </div>
      <div id="bgs" class="nones"></div>
        <div id="weixin" class="nones grid grid-cols-3 gap-4 ">
          <div></div>
          <img src="img/logo.png" alt="">
          <img style="float: right;margin-right: 10px;" src="img/weixin.png" width="110">
        </div>
      
<script src="js/Man100m.js"></script>
<script src="js/Girl100.js"></script>
<script src="js/Man800.js"></script>
<script src="js/Girl800.js"></script>
<script src="js/GirlShot.js"></script>
<script src="js/ManShot.js"></script>
<script src="js/Manjump.js"></script>
<script src="js/GirlJump.js"></script>
<script>
const inputs = document.getElementById("inputs");
const scores = document.getElementById("scores");
const Score100 = document.getElementById("Score100");
const ScoreShot = document.getElementById("ScoreShot");
const ScoreJump = document.getElementById("ScoreJump");
const Score800Minute = document.getElementById("minute");
const Score800Second = document.getElementById("second");
const Score800Msec = document.getElementById("msec");

const Score100Result = document.getElementById("Score100Result");
const Score800Result = document.getElementById("Score800Result");
const ScoreShotResult = document.getElementById("ScoreShotResult");
const ScoreJumpResult = document.getElementById("ScoreJumpResult");
const Scoresum = document.getElementById("Scoresum");
const ScoreConvertInto = document.getElementById("ScoreConvertInto");

const Score100Input = document.getElementById("Score100Input");
const Score800Input = document.getElementById("Score800Input");
const ScoreShotInput = document.getElementById("ScoreShotInput");
const ScoreJumpInput = document.getElementById("ScoreJumpInput");

let ScoreTYPE;//体育折合分数
let Score800 = [];//800米分钟秒毫秒
function Score(){
  inputs.classList.add("nones");
  scores.classList.remove("nones");
  document.getElementById('bgs').classList.remove('nones');
  document.getElementById('weixin').classList.remove("nones");
  const selectedSex = document.querySelector('input[name="sex"]:checked');
  let sex = selectedSex.value;
  Score800[0] = Number(Score800Minute.value);
  Score800[1] = Number(Score800Second.value);
  Score800[2] = Number(Score800Msec.value);
  if(Score800[2] < 10){
    Score800[2] = Score800[2] + '0'
    Score800[2] = Number(Score800[2]);
  }
  document.getElementById('logos').classList.add('nones');
  let sum;
  if(sex == "男"){
    Score100Result.innerHTML = getMan100mScore(Score100.value)
    ScoreShotResult.innerHTML = GetManShotScore(ScoreShot.value)
    ScoreJumpResult.innerHTML = GetManJumpScore(ScoreJump.value)
    Score800Result.innerHTML = GetMan800Score(Score800, formattedMan800data);
    //Score800Result.innerHTML = GetGirl800Score(Score800,formattedGirl800data)
    sum = getMan100mScore(Score100.value) + GetManShotScore(ScoreShot.value) +GetManJumpScore(ScoreJump.value) + GetMan800Score(Score800, formattedMan800data);
  }else{
    Score100Result.innerHTML = getGirl100mScore(Score100.value)
    ScoreShotResult.innerHTML = GetGirlShotScore(ScoreShot.value)
    ScoreJumpResult.innerHTML = GetGirlJumpScore(ScoreJump.value)
    Score800Result.innerHTML = GetGirl800Score(Score800, formattedGirl800data)
    sum = getGirl100mScore(Score100.value) + GetGirlShotScore(ScoreShot.value) +GetGirlJumpScore(ScoreJump.value) + GetGirl800Score(Score800, formattedGirl800data);
  }
  Scoresum.innerHTML = sum;
  ScoreTYPE=(sum * 4.5).toFixed(2)
  ScoreConvertInto.innerHTML = ScoreTYPE;
  Score100Input.innerHTML = Score100.value;
  Score800Input.innerHTML = Score800Minute.value + ':' + Score800Second.value + '.' + Score800Msec.value;
  ScoreShotInput.innerHTML = ScoreShot.value;
  ScoreJumpInput.innerHTML = ScoreJump.value;
}
function breaks(){
  scores.classList.add("nones");
  inputs.classList.remove("nones");
  document.getElementById('logos').classList.remove("nones");
  vSecond.classList.add("nones");
  synthesisDiv.classList.remove("nones");
  document.getElementById('weixin').classList.add("nones");
  document.getElementById('bgs').classList.add('nones');
}
const vSecond = document.getElementById("vSecond");
const synthesisDiv = document.getElementById("synthesisDiv");
const synthesisConvertInto = document.getElementById("synthesisConvertInto");
const synthesisInput = document.getElementById("synthesisInput");
const finalScore = document.getElementById("finalScore");
function synthesis(){
  vSecond.classList.remove("nones");
  synthesisDiv.classList.add("nones");
  synthesisConvertInto.innerHTML = (synthesisInput.value * 0.4).toFixed(2);
  finalScore.innerHTML = (Number(ScoreTYPE) + Number((synthesisInput.value * 0.4).toFixed(2))).toFixed(2);
}
</script>
</body>
</html>